<template>
  <div class="com-container">
    <div ref="chart" class="com-chart"></div>
  </div>
</template>

<script>
import { markRaw } from 'vue';
import * as echarts from 'echarts'
require('echarts/theme/dark');
export default {
  data() {
    return {
      chartInstance: null,
      allData: null,
    }
  },
  mounted() {
    this.initChart()
    this.getData()
    window.addEventListener('resize',this.screenAdapter)
    this.screenAdapter()
  },
  destroyed(){
    window.removeEventListener('resize',this.screenAdapter)
  },
  methods:{
    initChart(){
      this.chartInstance = markRaw(echarts.init(this.$refs.chart,'dark'))
      const initOption = {
        title:{
          text: '▎ 睡眠障碍分布情况矩形树图',
          top: 8,
          left: 8,
        },
        grid:{
          top: '30%',
          left: '20%',
          right: '20%',
          bottom: '10%',
        },
        tooltip:{
          show:true
        },
        series: [
          {
            type: 'treemap',
            label: {
              show: true,
            },
            itemStyle: {
              normal: {
                borderColor: '#fff',
              },
            },
          },
        ],
      }
      this.chartInstance.setOption(initOption)
    },
    async getData(){
      const {data: ret} = await this.$axios.get('chart6')
      this.allData = ret
      this.updataChart()
    },
    updataChart(){
      const seriesData = this.allData.map(item => ({
        name: item.sleepDisorder,
        value: item.num,
      }));
      const option = {
        series: [
          {
            data: seriesData,
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
    screenAdapter(){
      const titleFontSize = this.$refs.chart.offsetWidth / 100 * 3
      const adapterOption = {
        title:{
          textStyle:{
            fontSize: titleFontSize
          },
        },
      }
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()
    }

  }
}
</script>

<style></style>